<script>
import { getNavByPageId } from '@admin/api/common';
import { defineAsyncComponent } from 'vue';
import { loadComponent } from '@/router/elegant/transform';

export default {
  name: 'TabPage',
  provide() {
    return {
      tabPage: this
    };
  },
  data() {
    return {
      pageLoading: true,
      navs: [],
      currentNav: {},
      currentNavCode: '',
      load: true, // 解决渲染问题
      loadedNavs: []
    };
  },
  computed: {
    code() {
      return this.$route.meta.code;
    }
  },
  created() {
    this.createTab();
  },
  deactivated() {
    console.log(1111);
    console.log(this.currentNavCode);
    this.loadedNavs = [this.currentNavCode];
  },
  methods: {
    handleBeforeleave(activeName, oldActiveName) {
      this.load = false;
      setTimeout(() => {
        this.load = true;
      }, 100);
      return true;
    },
    handleTabChange(tabPaneName) {
      console.log(tabPaneName);
      this.loadedNavs.push(tabPaneName);
      this.onActivated();
    },
    createTab() {
      const params = {
        pageId: this.code
      };
      getNavByPageId(params)
        .then(res => {
          this.navs = res.data
            .map(item => {
              if (item.vueComponent) {
                item.app = defineAsyncComponent(loadComponent(item.vueComponent));
              }
              return item;
            })
            .sort((a, b) => {
              return a.orderId >= b.orderId ? 1 : -1;
            });
          this.setDefaultNav();
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },
    setDefaultNav() {
      if (this.navs.length > 0) {
        this.currentNav = this.navs[0];
        this.currentNavCode = `nav_${this.currentNav.id}`;
        this.loadedNavs = [this.currentNavCode];
      }
    },
    // 切换tab页时还原$CD变量
    onActivated() {
      console.log(this.$refs);
      console.log(this.$refs[this.currentNavCode]);
      // let navCode = this.currentNavCode.slice(4)
      // CDPlugin._reset(navCode);
      if (this.$refs[this.currentNavCode]) {
        const currentRef = Array.isArray(this.$refs[this.currentNavCode])
          ? this.$refs[this.currentNavCode][0]
          : this.$refs[this.currentNavCode];
        if (currentRef.$refs.common) {
          currentRef.$refs.common.onActivated();
        } else {
          currentRef.onActivated();
        }
      }
    }
  }
};
</script>

<template>
  <div v-loading="pageLoading">
    <ElTabs
      v-if="currentNavCode"
      v-model="currentNavCode"
      :before-leave="handleBeforeleave"
      @tab-change="handleTabChange"
    >
      <ElTabPane v-for="(item, index) in navs" :key="index" :label="item.name" :name="'nav_' + item.id">
        <div v-show="load && currentNavCode === 'nav_' + item.id">
          <template v-if="loadedNavs.includes('nav_' + item.id)">
            <component :is="item.app" v-if="item.app" :ref="`nav_${item.id}`" />
            <CommonPage v-else :ref="`nav_${item.id}`" :ccode="item.id" is-tab-page />
          </template>
        </div>
      </ElTabPane>
    </ElTabs>
    <ElEmpty v-else :image-size="200" description="未配置子页面" />
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
